<template>
  <div ref="componentWrap" class="component-wrap">
    <DigitClock :clock-attrs="element" />
    <ShowBorder v-if="borderShow" :border-attrs="borderAttrs" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ShowBorder from '@/components/Editor/ShowBorder.vue'
import { pick } from 'lodash'
import { borderAttr } from '@/custom-component/component-list'
import DigitClock from '@/custom-component/Clock/DigitClock.vue'

export default {
  name: 'Clock',
  components: { ShowBorder, DigitClock },
  props: {
    element: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      width: 0,
      height: 0,
    }
  },
  computed: {
    ...mapState(['curComponent']),
    borderAttrs() {
      const attrs = Object.keys(borderAttr)
      return pick(this.element, [...attrs, 'width', 'height', 'id'])
    },
    borderShow() {
      return Number(this.element?.borderSW) === 1
    },
  },
  watch: {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped></style>
